<template>
  <view class="Global">
    <bgImage></bgImage>
    <MyNav :title="title" bgColor="" :backIcon="isback"></MyNav>

    <scroll-view scroll-y="true" class="contentOut" :style="'height:'+scrollViewHeight+'px'">

      <view class="contentOutInner">

    <view class="contentListOut">
    <view class="contentCenterTitle1"></view>
    <scroll-view scroll-x="true" class="srollColorData">
      <view class="dataContent">
        <view class="contentCenterTitle">
          <text class="contentCenterTitleTextone">#</text>
<!--          <text class="contentCenterTitleText">扎数</text>-->
          <text class="contentCenterTitleText2">颜色</text>
          <text class="contentCenterTitleText" v-for="(item,index) in sizeListTable">{{item.sizeName}}</text>

        </view>


        <view class="contentCenterList" v-for="(itemH,indexH) in colorListNewSelect">

          <input disabled="false" type="text" :value="indexH+1" class="contentCenterListInputText11"
                 v-if="indexH%2!=0" />

<!--          <input disabled="false" type="text" placeholder="数量" class="contentCenterListInput" v-if="indexH%2!=0"  v-model="itemH.zhaNum" />-->

          <input disabled="false" type="text" placeholder="颜色" :value="itemH.colorName"
                 class="contentCenterListInputTextD" v-if="indexH%2!=0 " />


          <input disabled="false" type="text" placeholder="数量" class="contentCenterListInput"
                 v-for="(item,index) in sizeListNewSelect" v-if="indexH%2!=0 && item.row==indexH" v-model="item.num" />


          <!-- 偶数行底色不一样 -->
          <input disabled="false" type="text" :value="indexH+1"
                 class="contentCenterListInputText11" v-if="indexH%2==0" />

<!--          <input disabled="false" type="text" placeholder="数量" class="contentCenterListInput1" v-if="indexH%2==0" v-model="itemH.zhaNum" />-->

          <input disabled="false" type="text" placeholder="颜色" :value="itemH.colorName"
                 class="contentCenterListInputTextS" v-if="indexH%2==0 " />


          <input disabled="false" type="text" placeholder="数量" class="contentCenterListInput1"
                 v-for="(item,index) in sizeListNewSelect" v-if="indexH%2==0 && item.row==indexH"  v-model="item.num" />

        </view>

      </view>
    </scroll-view>

      <view class="loginContent1" id="mainBottom">

<!--        <button style="color:#ffffff" class="login" type="default">返回</button>-->
      </view>

    </view>
      </view>
    </scroll-view>


  </view>
</template>

<script>

import MyNav from '@/components/customnavbar.vue'
import bgImage from '@/components/backgroundImage.vue'


export default {
  name: "cuttingOrderCount",
  components: {
    MyNav,
    bgImage
  },
  data() {
    return {
      title: '统计',
      isback: true,
      sizeListTable: [],
      colorListNewSelect: [],
      sizeListNewSelect: [],
      scrollViewHeight: 0,
      bottomTop: '',
    }
  },
  onLoad: function (option) {
    console.log('option',option)
    let item = JSON.parse(decodeURIComponent(option.item));
    this.sizeListTable = item.sizeListTable
    this.colorListNewSelect = item.colorListNewSelect
    this.sizeListNewSelect = item.sizeListNewSelect

    let table = {
      id: '',
      sizeName: '小计',
      colum: this.sizeListTable.length,
    }
    this.sizeListTable.push(table);

    const newArr = [...this.sizeListNewSelect]
    let length = this.sizeListTable.length
    // 计算行 总数
    if(this.colorListNewSelect.length>0){
      this.colorListNewSelect.forEach((item,index)=>{
        let rowNum = index;
        let total = 0;
        if(newArr.length>0){
          newArr.forEach((row,indexR)=>{
            if(item.colorName===row.color && rowNum===row.row){
              total = parseInt(total) + parseInt(row.num);
            }
          })
        }
        let data = {
          size: '小计',
          sizeId: '',
          select: false,
          num: total,
          row: index, //行号
          colum: length, //列号
          color: item.colorName,
          colorId: item.id
        }
        this.sizeListNewSelect.push(data);
      })
    }

    //计算列 总数
    let colorData = {
      id: '',
      colorName: '合计'
    }
    this.colorListNewSelect.push(colorData)
    let colorNum = this.colorListNewSelect.length-1
    const newArrColor = [...this.sizeListNewSelect]
    if(this.sizeListTable.length>0){
      this.sizeListTable.forEach((item,index)=>{
        let colum = index+1
        let total = 0
        if(newArrColor.length>0){
          newArrColor.forEach((row,indexR)=>{
            if(row.colum===colum && item.sizeName===row.size){
              total = parseInt(total) + parseInt(row.num);
            }
          })
        }

        let data = {
          size: item.sizeName,
          sizeId: item.id,
          select: false,
          num: total,
          row: colorNum, //行号
          colum: colum, //列号
          color: '合计',
          colorId: ''
        }
        this.sizeListNewSelect.push(data);
      })
    }


  },
  onReady() {
    // 获取距离顶部的距离
    let query = uni.createSelectorQuery().in(this);
    query.select('#mainBottom').boundingClientRect(data => {
      this.bottomTop = data.top
      // console.log('2底部距离', this.bottomTop);
      const app = getApp();

      this.scrollViewHeight = this.bottomTop - app.globalData.totalHeight
      // console.log('可滚动距离', this.scrollViewHeight,this.bottomTop,app.globalData.totalHeight);
    }).exec();
  },
}

</script>

<style lang="scss">

  .contentOutInner {

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .contentOut {

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 690rpx;

    background: #FFFFFF;
    border-radius: 30rpx;
  }
  .contentListOut {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    //margin-top: 30rpx;
  }
  .contentCenterTitle1 {
    width: 100%;
    height: 80rpx;
    background: #0081FF;
    border-radius: 30rpx 30rpx 0rpx 0rpx;
    margin-bottom: -80rpx;

  }
  .srollColorData {
    width: 630 rpx;
    white-space: nowrap;
    display: flex;
    margin-bottom: 50 rpx;
    //background: #ffffff;
  }
  .dataContent {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 630rpx;
    flex-direction: column;
  }
  .contentCenterTitle {
    display: inline-block;
    width: 100%;
    height: 80rpx;
    align-items: center;
    background: #0081FF;
    border-radius: 30rpx 30rpx 0rpx 0rpx;
  }
  .contentCenterTitleTextone {
    width: 60rpx;
    line-height: 90rpx;
    font-family: HarmonyOS Sans SC;
    font-weight: 600;
    font-size: 28rpx;
    color: #FFFFFF;
    display: inline-block;
    border-right: #FFFFFF 0.1rpx solid;
    text-align: center;
  }
  .contentCenterTitleText {
    width: 100rpx;
    line-height: 90rpx;
    font-family: HarmonyOS Sans SC;
    font-weight: 600;
    font-size: 28rpx;
    color: #FFFFFF;
    display: inline-block;
    border-right: #FFFFFF 0.1rpx solid;
    text-align: center;
  }
  .contentCenterTitleText2 {
    width: 160rpx;
    line-height: 90rpx;
    font-family: HarmonyOS Sans SC;
    font-weight: 600;
    font-size: 28rpx;
    color: #FFFFFF;
    display: inline-block;
    border-right: #FFFFFF 0.1rpx solid;
    text-align: center;
  }
  .contentCenterListInputText11 {
    display: inline-block;
    width: 60rpx;
    height: 90rpx;
    text-align: center;
    font-size: 28rpx;
    //background: #F9FCFF;
    border-right: #9E9E9E 0.5rpx solid;
  }
  .contentCenterListInput1 {
    display: inline-block;
    width: 100rpx;
    height: 90rpx;
    //border: #EEEEEE 1rpx solid;
    text-align: center;
    //margin: 1rpx;
    font-size: 28rpx;
    //background: #F9FCFF;
    border-right: #9E9E9E 0.5rpx solid;
  }
  .contentCenterListInputTextS {
    display: inline-block;
    width: 160rpx;
    height: 90rpx;
    text-align: center;
    font-size: 28rpx;
    //background: #F9FCFF;
    border-right: #9E9E9E 0.5rpx solid;
  }
  .contentCenterListInput {
    display: inline-block;
    width: 100rpx;
    height: 90rpx;
    //border: #EEEEEE 1rpx solid;
    text-align: center;
    //margin: 1rpx;
    font-size: 28rpx;
    border-right: #9E9E9E 0.5rpx solid;
  }
  .contentCenterListInputTextD {
    display: inline-block;
    width: 160rpx;
    height: 90rpx;
    text-align: center;
    font-size: 28rpx;
    border-right: #9E9E9E 0.5rpx solid;
  }
  .contentCenterList {
    width: 100%;
    height: 80rpx;
    display: inline-block;
    border: #9e9e9e 0.5rpx solid;

  }
  .login {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20rpx;
    width: 690rpx;
    height: 100rpx;
    background: linear-gradient(90deg, #45A8FF, #0AE1C6);
    border-radius: 20rpx;
    margin-bottom: 20rpx;


    font-weight: 400;
    font-size: 36rpx;
    color: #FFFFFF;
    text-align: center;
    font-weight: bold;


    background: linear-gradient(90deg, #45A8FF, #0AE1C6);

  }
  .loginContent1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 750rpx;

    position: absolute;
    bottom: 20rpx;


  }
</style>
